<template>
  <a-modal v-model:visible="visible" title="提单" :width="605" :mask-closable="false" @cancel="handleCancel">
    <a-spin :spinning="loading">
      <a-form
        ref="FormRef"
        :model="formFields"
        :rules="formRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item label="提单客户" name="customerId">
          <a-select
            v-model:value="formFields.customerId"
            show-search
            placeholder="请搜索您的提单客户"
            :default-active-first-option="false"
            :filter-option="false"
            allow-clear
            :loading="customerLoading"
            :disabled="disabled"
            :not-found-content="customerLoading ? undefined : '暂无数据'"
            :options="customerList"
            @search="handleSearch"
          >
            <template v-if="customerLoading" #notFoundContent> <a-spin size="small" />查询中 </template>
          </a-select>
        </a-form-item>
        <a-alert
          v-if="phone"
          message="提示："
          :description="`该客户的联系方式为 ${
            phone || '未知'
          }，店铺资源将发放至该号码，请确认号码是否为当前客户真实使用的电话，如需调整请至CRM系统修改后再提单。`"
          type="warning"
          show-icon
        />
      </a-form>
    </a-spin>

    <template #footer>
      <a-button type="primary" :disabled="submitting" @click="handleSubmit">提单</a-button>
      <a-button key="back" @click="handleCancel"> 取消 </a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { type FormInstance, message } from 'ant-design-vue'
import { useVModel } from '@vueuse/core'
import { debounce } from 'lodash-es'
import type { OrderFields } from '@/views/price-sheet/interface'
import type { Customer } from '@/core/interfaces/customer'
import { IsPersonalEnum } from '@/core/interfaces/customer'

interface Props {
  show: boolean
  data: Partial<OrderFields>
  submitting: boolean
  loading: boolean
  disabled?: boolean
  customerLoading: boolean
  customerList: Customer[]
}

interface Emits {
  (e: 'on-submit'): void
  (e: 'on-search', value: string): void
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  data: () => ({}),
  submitting: false,
  disabled: false,
  loading: false,
  customerLoading: false
})

const curCustomer = computed(() => {
  return props.customerList.find((id) => id.value === formFields.value.customerId)
})

const phone = computed(() => {
  return curCustomer.value?.phone
})

const emit = defineEmits<Emits>()

const visible = useVModel(props, 'show')
const formFields = useVModel(props, 'data')
const FormRef = ref<FormInstance>()

const formRules = reactive({
  customerId: [
    {
      required: true,
      trigger: 'change',
      message: '请选择提单客户'
    }
  ]
})

const handleSearch = debounce((value: string) => {
  if (value) {
    emit('on-search', value)
  }
}, 500)

function handleSubmit() {
  FormRef.value?.validate().then(() => {
    if (phone.value) {
      if (curCustomer.value.isPersonal === IsPersonalEnum.Personal) {
        message.error('个人属性客户不支持购买当前产品。')
      } else {
        emit('on-submit')
      }
    } else {
      message.error('客保联系电话为空，提单失败。')
    }
  })
}

function handleCancel() {
  FormRef.value?.resetFields()
  visible.value = false
}
</script>

<script lang="ts">
export default { name: 'SubmitOrder' }
</script>
